<template>
  <div class="accountPage">
    <van-nav-bar
      title="账号"
      left-arrow
      @click-left="goBackHandle"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
    </van-nav-bar>
    <div class="dataContent">
      <div class="contentTop"></div>
      <div class="contentDetail">
        <div class="formItem">
          <span>姓名</span><span>{{ accountData.name }}</span>
        </div>
        <div class="formItem">
          <span>手机号</span><span>{{ accountData.mobile }}</span>
        </div>
        <div class="formItem">
          <span>电子邮箱地址</span><span>{{ accountData.email }}</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <van-button type="default" @click="logout">退出登录</van-button>
    </div>
    <van-dialog
      v-model="show"
      title="提示信息"
      message="确定要退出吗？"
      show-cancel-button
      @confirm="confirm"
      confirm-button-color="#006dff"
    />
  </div>
</template>
<script>
import { SuccesFN, FailFN } from '@/DceMessage'
import backMixin from '@/backMixin'
export default {
  name: 'accountPage',
  mixins: [backMixin],
  data() {
    return {
      accountData: {},
      show: false
    }
  },
  created() {},
  mounted() {
    this.accountData = JSON.parse(
      window.localStorage.getItem('attendance-records')
    )
  },
  methods: {
    // 点击返回按钮
    goBackHandle() {
      this.$router.go(-1)
    },
    // 点击退出登录按钮
    logout() {
      this.show = true
    },
    // 点击弹窗确定按钮
    confirm() {
      this.show = false
      SuccesFN('退出成功')
      window.localStorage.clear() // 清空本地缓存中的所有内容
      // this.$router.replace('/')
      this.finishInApp() // 退出到才讯通页面
    },
    // 判断当前系统是否为iOS系统
    IsIOS() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    // 判断当前系统是否安卓系统
    IsAndroid() {
      if (/(Android|Adr)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    async finishInApp() {
      this.$router.push({name:'login'})
      // if (this.IsIOS()) {
      //   console.log('IOS >>>>> ', window.webkit, window.webkit.messageHandlers)
      //   window.webkit.messageHandlers.LinkToDfitcNativeFunction.postMessage(
      //     '9918'
      //   )
      // } else if (this.IsAndroid()) {
      //   window.smartinfo.LinkToDfitcNativeFunction('9918')
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.accountPage:deep {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .dataContent {
    padding-top: 56px;
    .contentDetail {
      background-color: #fff;
      padding: 0 16px;
      color: black;
      .formItem {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        height: 40px;
        line-height: 40px;
        &:last-child {
          border-bottom: 0;
          padding-bottom: 40px;
        }
      }
    }
  }
  .footer {
    display: flex;
    background: #fff;
    .van-button {
      flex: 1;
      margin: 10px 16px;
      font-size: 16px;
      border-radius: 10px;
      border-color: #ccc;
    }
  }
}
</style>
